<template>
  <div class="payment-box">
    <van-empty v-show="msg" description="您还没有待付款的订单" />
    <likelike v-show="msg" />
    <div class="box" v-for="(pays, index) in pay" :key="index">
      <div class="top">
        <div class="left">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaomixinLogo"></use>
          </svg>
          <span>{{ pays.source }}</span>
        </div>
        <div class="right">{{ pays.state }}</div>
      </div>
      <router-link to="/order">
        <div
          class="goods"
          v-for="payss in pay[index].arr"
          :key="payss.id"
          @click="showPopup111(index, pays.id, pays.port)"
        >
          <div class="left">
            <img :src="payss.img" alt="" />
            <div>
              <p>{{ payss.name }}</p>
              <span>{{ payss.color }}</span>
            </div>
          </div>
          <div class="right">
            <p>{{ payss.price }}</p>
            <div>
              <span>x</span><span>{{ payss.number }}</span>
            </div>
          </div>
        </div>
      </router-link>
      <div class="money">
        <div class="price">
          <div class="left">{{ pays.date }}</div>
          <div class="right">
            共<span>{{ pays.arr.length }}</span
            >件商品 实付金额:
            <span class="total">￥{{ pays.prices }}</span>
          </div>
        </div>
        <div class="bottom">
          <div class="delete" @click="showPopup(index, pays.id)">取消订单</div>
          <div class="amend">修改地址</div>
          <div class="payment">立即付款</div>
        </div>
      </div>
    </div>
    <van-action-sheet
      v-model="show"
      :round="false"
      title="您确认要取消订单吗？"
    >
      <div class="content">
        <div class="left" @click="back">再看看</div>
        <div class="right" @click="cancel">确认取消</div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
// import Vue from "vue";
import { Popup } from "vant";
Vue.use(Popup);
import Vue from "vue";
import { Empty } from "vant";
Vue.use(Empty);
import { ActionSheet } from "vant";
import axios from "axios";
import store from "../../store/index";
import likelike from "./likelike";
Vue.use(ActionSheet);
export default {
  name: "payment",
  components: {
    likelike,
  },
  data() {
    return {
      show: false,
      reveal: true,
      pay: [],
      index: 0,
      paysdate: "",
      msg: true,
      id: "",
      index: "",
      port: "",
    };
  },
  methods: {
    showPopup111(date, id, port) {
      this.id = id;
      this.index = date;
      this.port = port;
      store.commit("mChangeOrderDetails", this.id);
      store.commit("mChangePort", this.port);
    },
    qingqiu() {
      axios({
        url: "http://localhost:3000/payment?tel=" + localStorage.getItem("tel"),
        method: "get",
        params: {
          type: this.type,
        },
      }).then((res) => {
        console.log(res);
        this.pay = res.data;
        if (res.data.length > 0) {
          this.msg = false;
        } else {
          this.msg = true;
        }
      });
    },
    showPopup(date, paysdate) {
      this.show = true;
      this.index = date;
      this.id = paysdate;
      // this.round = false;
    },
    back() {
      this.show = false;
    },
    cancel() {
      this.reveal = false;
      this.show = false;
      console.log(this.index);
      console.log(this.pay);
      console.log(this.id);
      axios({
        url: "http://localhost:3000/payment/" + this.id,
        method: "delete",
        params: {
          type: this.type,
        },
      }).then((res) => {
        console.log(res);
        this.qingqiu();
      });
    },
  },
  created() {
    this.qingqiu();
  },
};
</script>

<style scoped>
.icon {
  width: 0.18rem;
  height: 0.18rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.box {
  margin-top: 0.06rem;
  background: #f5f5f5;
}
.top {
  height: 0.35rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top .left {
  font-size: 0.14rem;
  margin-left: 0.12rem;
  display: flex;
}
.top .left span {
  margin-left: 0.05rem;
}
.top .right {
  font-size: 0.14rem;
  color: #fa6016;
  margin-right: 0.16rem;
}
.goods {
  height: 0.76rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goods .left {
  display: flex;
}
.goods .left div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods .left div p {
  font-size: 0.13rem;
}
.goods .left div span {
  font-size: 0.11rem;
  color: #8a8a8a;
}
.goods .right {
  height: 0.5rem;
  margin-right: 0.15rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.14rem;
  color: #8c8c8c;
}
.goods img {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  margin-right: 0.1rem;
}
.money {
  height: 0.84rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}
.money .bottom {
  display: flex;
}
.money .bottom div {
  margin-left: 0.05rem;
}
.money .price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.money .price .left {
  font-size: 0.11rem;
  color: #8c8c8c;
}
.money .price .right {
  font-size: 0.13rem;
}
.money .price .right .total {
  font-size: 0.16rem;
  color: #8c8c8c;
}
.money .bottom div {
  width: 0.75rem;
  height: 0.29rem;
  line-height: 0.29rem;
  text-align: center;
  border: 2px solid #e0e0e0;
  border-radius: 0.03rem;
  font-size: 0.11rem;
  color: #969696;
}
.money .bottom .amend {
  border: 1px solid #fa6016;
  color: #fa6016;
}
.money .bottom .payment {
  border: 1px solid #fa6016;
  color: #fa6016;
}
.content {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.24rem;
}
.content div {
  width: 1.67rem;
  height: 0.38rem;
  line-height: 0.38rem;
  text-align: center;
  border: 1px solid #dbdbdb;
  font-size: 0.14rem;
}
.content .left {
  border-radius: 0.19rem 0 0 0.19rem;
}
.content .right {
  border-radius: 0 0.19rem 0.19rem 0;
  color: #dc681e;
}
</style>